<style>
caption{ font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size: 16px;color: #3E576F;fill: #3E576F;font-size:16px !important;margin-bottom:10px; }
</style>
<script type="text/javascript" src="<?php $this->path('js/highcharts.js');?>"></script>
<script type="text/javascript" src="<?php $this->path('js/jquery.highchartTable.js');?>"></script>
<script type="text/javascript" src="<?php $this->path('js/selectBox.js');?>"></script>
		<section id="main" class="entire_width">
			<div class="container_12">
				<div id="content" class="grid_9" style="width:90%;">
        			<h1 class="page_title">Reports and Statistics</h1>
						<div class="options" style="width:100%">
							<div class="sort">
								<form class="form_style" style="padding:0px;">
									<input type="button" value="Print" />
								</form>
							</div>
            				<div class="sort">
        						FROM
        						<input type="text" id="datepick1" style="width:70px" maxlength="10" value="<?php echo date("m/d/Y"); ?>">
        						TO
        						<input type="text" id="datepick2" style="width:70px" maxlength="10" value="<?php echo date("m/d/Y"); ?>"/>
    						</div>
                    		<div class="sort">
        						Display as
        						<select id="tdisplay">
        							<option value="0">Select View</option>
        							<option value="table">Tabular</option>
									<option value="area">Area</option>
									<option value="column" selected>Column</option>
									<option value="line">Line</option>
									<option value="pie">Pie</option>
									<option value="spline">Spline</option>
        						</select>
                    		</div><!-- .sort -->
							
            				<div class="search-bar">
        						Reports for
        						<select id="rtype" style="width:140px;">
        							<option value="0">Select Report</option>
        							<option value="1" selected>Annual Sales</option>
        							<option value="2">Daily Sales</option>
        							<option value="3">Monthly Sales</option>
        							<option value="4">Weekly Sales</option>
        							<option value="5">Creditors</option>
        							<option value="6">Suppliers</option>
        							<option value="7">Out of Stocks</option>
									</select>
    						</div>
                	</div><!-- .options -->
        				<div class="forprint">
    						<link href="<?php $this->path('css/breeze.css');?>" rel="stylesheet" media="all" />
							<div>
                                <table class="highchart" data-graph-container-before="1" data-graph-type="column" style="display:none;">
                                </table>
							</div>
						</div>
        				<div class="clear"></div>
        				<br />
        				<div class="clear"></div>
		</section>
        <div class="clear"></div>
<script>
	$(document).ready(function() {
			$('#branding #site_logo').parent().parent().css('margin-top','-40px').show();
			$('#branding #cart_nav').hide();
			$('#branding .grid_3 .search').hide();
			$('#branding .private ul').children().hide();
			$('#branding .private ul li:nth-child(5)').show();
			$('#branding .private ul li:nth-child(6)').show();
			
			$('#block_nav_primary').css('background', '#f5f7f9');
			$('#branding .private ul li:last-child').show().parent().parent().css({"margin-right": "-260px", "margin-top": "-5px"}).parent().css('height','10px');
			$('header#branding').css('height','50px');
			$('.phone_top').parent().css('visibility','hidden');
			$('#header-top').hide().parent().css('padding-top','10px');
				
			
			var printReport = function (html){  
				var styles = '<style tyle="text/css">@page { size:8in 11in; margin: 1in; } body div:first-child {position:relative;margin-left:auto;margin-right:auto;} table, tr, td{ font-size:125px; }</style>';
				if($('#tdisplay').val() != 'table') 
					var styles = '<style tyle="text/css">@page { size:11in 8in; margin: 1in; } body div:first-child {position:relative;margin-left:auto;margin-right:auto;} }</style>';
				var printWin = window.open('','','left=0,top=0,width=1000,height=800,toolbar=0,scrollbars=0,status  =0');
				printWin.document.write("<html><body style='background:none;padding:1in;'>" + styles + html + "</body></html>");
				printWin.document.close();
				printWin.focus();
				printWin.print();
				printWin.close();
            }
			
			$('input[type=button]').each(function(){
				$(this).click(function(){
					printReport($('.forprint').html());
				});
			});

            $('#datepick1').datepicker({
                defaultDate: null,
                onClose: function( selectedDate ) {
                  $('#datepick2').datepicker( "option", "minDate", selectedDate );
                }
            }).change(function(){loadTable($('#rtype').val());});
            $('#datepick2').datepicker({
                defaultDate: "+1w",
                onClose: function( selectedDate ) {
                  $('#datepick1').datepicker( "option", "maxDate", selectedDate );
                }
            }).change(function(){loadTable($('#rtype').val());});
			
			$('#tdisplay').selectBox().change(function(){
				loadTable($('#rtype').val());
			});
			$('#rtype').selectBox().change(function(){
				var n = $(this).val();
				if (n == 7){
				    window.location = "?module=pos&action=stocks";
				}
				else if (n == 6) {  
					window.location = "?module=pos&action=suppliers";
				} else {
				  loadTable(n);
				}
				
			});
			var loadTable = function(type){
				$.post('?module=pos&action=reports&ajax=1',{gett:1,type:type,from:$('#datepick1').val(),to:$('#datepick2').val()},function(data){
				
				
				$('table.highchart').html(data);
				$('table.highchart').highchartTable();
				
				 
				if($('#tdisplay').val() != 'table'){
					vals = $('#tdisplay').val();
					if(vals==0) vals = 'column';
					$('table.highchart').hide(1, function(){
						if($('.highcharts-container').length == 0)
							$('.highcharts-container').fadeIn('slow');
						else{
							$('.highcharts-container').remove();
							var p = $('table.highchart').parent();
							var html = $('table.highchart').attr('data-graph-type',vals).parent().html();
							p.html(html);
							$('table.highchart').highchartTable();
							$('.highcharts-container').hide().fadeIn('slow');
						}
					})
				}else{
					$('.highcharts-container').hide(1, function(){
						$('table.highchart').fadeIn('slow');
					});
				}
				});
			};
			loadTable(1);
		});
</script>